<template>
  <div class="list">
    <div class="head">
      <nav-bar
        title="标题"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #right> <icon name="search" size="18" /> </template
      ></nav-bar>
    </div>
    <swipe-cell class="nav" v-for="item in carts">
      <card
        :price="item.price"
        :title="item.product.name"
        :thumb="urlImg(item.product.coverImage)"
      >
        <template #tag>
          <Checkbox v-model="item.checked" />
        </template>
        <template #footer>
          <stepper
            v-model="item.amount"
            @minus="addCartMount(item.product, -1)"
            @plus="addCartMount(item.product, 1)"
          />
        </template>
      </card>
      <template #right>
        <Button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="delCartHandel(item.id)"
        />
      </template>
    </swipe-cell>
    <div class="img">
      <img src="../../images/small.png" alt="" />
    </div>
    <!-- 广告商品 -->
    <cart />
    <submit-bar :price="allPrice" button-text="提交订单" @submit="onSubmit">
      <checkbox v-model="checAll">全选</checkbox>
      <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
      </template>
    </submit-bar>
  </div>
</template>
<script setup>
import {
  SwipeCell,
  Card,
  Checkbox,
  SubmitBar,
  NavBar,
  Icon,
  Toast,
  Button,
  Stepper,
} from "vant";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { computed } from "vue";
import cart from "./mermber/catPSD.vue";
import { useCart } from "../store/carts";
import { urlImg } from "../uitils/urlImg";
const router = useRouter();
const store = useCart();
const { carts } = storeToRefs(store);
const { delToCart, addToCart } = store;
const onClickLeft = () => {
  router.push({
    name: "list",
  });
};
const onClickRight = () => Toast("搜索");
// 数量加减
const addCartMount = (item, amount) => {
  addToCart(item.id, amount, item.price);
};
// 全选 反选
const checAll = computed({
  //主动设置值
  set(v) {
    return carts.value.forEach((item) => (item.checked = v));
  },
  //被动获取值
  get() {
    return carts.value.every((item) => item.checked);
  },
});
// 选的总价
const allPrice = computed(() => {
  return (
    carts.value
      .filter((item) => item.checked) // 获取选中的
      .reduce((pre, cur) => pre + cur.amount * cur.product.price, 0) * 100
  );
});
// 删除
const delCartHandel = (id) => {
  delToCart(id);
};
</script>
<style scoped lang="scss">
.card {
  background-color: white;
  margin-top: 5px;
  border-radius: 10px;
}
.list {
  overflow: visible;
  width: 100%;
  background-color: #f5f5f9;
  .head {
    width: 100%;
    background-color: white;
    height: 10vw;
    line-height: 10vw;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .nav {
    width: 95vw;
    border-radius: 15px;

    margin: auto;
    margin-top: 10px;
  }
  .img {
    margin: 10px 0 0 0;
    text-align: center;
  }
  // .goods-card {
  //   margin: 0;
  //   background-color: #fff;
  // }

  .delete-button {
    height: 100%;
  }
}
</style>
